//加载页面的动画效果
$(window).load(function() {
	$(".loading").fadeOut()
});

$(function() {

	var whei = $(window).width();
	$("html").css({
		fontSize: whei / 20
	});
	$(window).resize(function() {
		var whei = $(window).width();
		$("html").css({
			fontSize: whei / 20
		})
	});

	//时钟程序
	var t = null;
	t = setTimeout(time, 1000); //开始
	function time() {
		clearTimeout(t); //清除定时器
		dt = new Date();
		var y = dt.getFullYear();
		var mt = dt.getMonth() + 1;
		var day = dt.getDate();
		var h = dt.getHours(); //获取时
		var m = dt.getMinutes(); //获取分
		var s = dt.getSeconds(); //获取秒
		document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
		t = setTimeout(time, 1000); //设定定时器，循环运行
	}
	var totalConfirm = 0
	var totalSuspect = 0
	var totalDead = 0;
	var totalHeal = 0;
	var totalHealRate = 0;
	var totalDeadRate = 0;

	var addConfirm = 0;
	var addSuspect = 0;
	var addDead = 0;
	var addHeal = 0;

	var province = null;
	var chinaDay = null;

	$.ajax({
		url: analyzeUrl.getLocationData,
		dataType:"json",
		beforeSend: function (request) {
			request.setRequestHeader("token", localStorage.getItem("token"));
			request.setRequestHeader("ip", sessionStorage.getItem("ip"));
		},
		success: function(resp) {
			let list=resp.data
			let html=""
			for(let one of list){
				html+=`
					<tr>
						<td>${one.location}</td>
						<td>${one.wx}</td>
						<td>${one.zfb}</td>
						<td>${one.yl}</td>
						<td>${one.ct}</td>
					</tr>
				`
			}
			$("#province-table").append(html)
		}
	});
	var html=""
	for(name in province){
		var data=province[name]
		html+="<tr>"
		html+="<td>"+name+"</td>"
		html+="<td>"+data.confirm+"</td>"
		html+="<td>"+data.suspect+"</td>"
		html+="<td>"+data.heal+"</td>"
		html+="<td>"+data.dead+"</td>"
		html+="</tr>"
	}
	$(".table-style tbody").append(html)
	function map() {
		var geoCoordMap = {
			'新疆': [86.61, 40.79],
			'西藏': [89.13, 30.66],
			'黑龙江省': [128.34, 47.05],
			'吉林省': [126.32, 43.38],
			'辽宁省': [123.42, 41.29],
			'内蒙古': [112.17, 42.81],
			'北京': [116.40, 40.40],
			'宁夏': [106.27, 36.76],
			'山西省': [111.95, 37.65],
			'河北省': [115.21, 38.44],
			'天津': [117.04, 39.52],
			'青海省': [97.07, 35.62],
			'甘肃省': [103.82, 36.05],
			'山东省': [118.01, 36.37],
			'陕西省': [108.94, 34.46],
			'河南省': [113.46, 34.25],
			'安徽省': [117.28, 31.86],
			'江苏省': [120.26, 32.54],
			'上海': [121.46, 31.28],
			'四川省': [103.36, 30.65],
			'湖北省': [112.29, 30.98],
			'浙江省': [120.15, 29.28],
			'重庆': [107.51, 29.63],
			'湖南省': [112.08, 27.79],
			'江西省': [115.89, 27.97],
			'贵州省': [106.91, 26.67],
			'福建省': [118.31, 26.07],
			'云南省': [101.71, 24.84],
			'台湾': [121.01, 23.54],
			'广西省': [108.67, 23.68],
			'广东省': [113.98, 22.82],
			'海南省': [110.03, 19.33],
			'澳门': [113.54, 22.19],
			'香港': [114.17, 22.32]
		};
		let BJData=[]
		$.ajax({
			url: analyzeUrl.getMapData,
			dataType:"json",
			async:false,
			beforeSend: function (request) {
				request.setRequestHeader("token", localStorage.getItem("token"));
				request.setRequestHeader("ip", sessionStorage.getItem("ip"));
			},
			success: function(resp) {
				let list=resp.data
				for(let one of list){
					BJData.push([{ name: '北京' }, { name: one.location, value: one.ct }])
				}
			}
		})

		var convertData = function(data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				var dataItem = data[i];
				var fromCoord = geoCoordMap[dataItem[0].name];
				var toCoord = geoCoordMap[dataItem[1].name];
				if (fromCoord && toCoord) {
					res.push({
						fromName: dataItem[0].name,
						toName: dataItem[1].name,
						coords: [fromCoord, toCoord]
					});
				}
			}
			return res;
		};

		var series = [{
			name: "北京",
			type: 'lines',
			zlevel: 1,
			effect: {
				show: true,
				period: 6,
				trailLength: 0.7,
				color: '#fff',
				symbolSize: 3
			},
			lineStyle: {
				normal: {
					color: '#FFC34C',
					width: 0,
					curveness: 0.2
				}
			},
			data: convertData(BJData)
		}, {
			name: "北京",
			type: 'lines',
			zlevel: 2,
			symbol: ['none', 'arrow'],
			symbolSize: 10,
			effect: {
				show: true,
				period: 6,
				trailLength: 0,
				symbol: "arrow",
				symbolSize: 15
			},
			lineStyle: {
				color: '#FFC34C',
				width: 1,
				opacity: 0.6,
				curveness: 0.2
			},
			data: convertData(BJData)
		}, {
			name: "北京",
			type: 'effectScatter',
			coordinateSystem: 'geo',
			zlevel: 2,
			rippleEffect: {
				brushType: 'stroke'
			},
			label: {
				show: true,
				position: 'right',
				formatter: '{b}'
			},
			symbolSize: function(val) {
				return val[2] / 8;
			},
			itemStyle: {
				color: '#FFC34C'
			},
			data: BJData.map(function(dataItem) {
				// console.log(dataItem[1].name)
				console.log(geoCoordMap[dataItem[1].name].concat([dataItem[1].value]))
				return {

					name: dataItem[1].name,
					value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
				};
			})
		}];

		option = {
			backgroundColor: 'rgba(0,0,0,0)',
			geo: {
				map: 'china',
				label: {
					show: false
				},
				// roam: true,
				roam: false,
				zoom: 1.20,
				itemStyle: {
					areaColor: '#747474',
					borderColor: '#404a59'
				},

				emphasis: {
					label: {
						show: true
					},
					itemStyle: {
						areaColor: '#ccc'
					}
				}
			},
			series: series
		};
		var myChart = echarts.init(document.getElementById("map_1"))
		myChart.setOption(option)
	}
	map();

	function RandomNumBoth(Min, Max) {
		var Range = Max - Min;
		var Rand = Math.random();
		var num = Min + Math.round(Rand * Range); //四舍五入
		return num;
	}

	function echart_1() {
		let data_1 = []
		let data_2 = []
		$.ajax({
			url: analyzeUrl.getDayData,
			dataType:"json",
			async:false,
			beforeSend: function (request) {
				request.setRequestHeader("token", localStorage.getItem("token"));
				request.setRequestHeader("ip", sessionStorage.getItem("ip"));
			},
			success: function(resp) {
				let list=resp.data
				for(let one of list){
					data_1.push(one.ct)
					data_2.push(one.date)
				}
			}
		})

		option = {
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: data_2.reverse(),
				axisLabel: {
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: 12
					}
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)'
					}
				},

			},
			yAxis: {
				type: 'value',
				axisLabel: {
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: 12
					}
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)'
					}
				},
				splitLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.1)'
					},
				}
			},
			grid: {
				left: '0%',
				right: '0%',
				top: '10px',
				bottom: '2%',
				containLabel: true
			},
			series: [{
				name: "周数据",
				smooth: true,
				showSymbol: false,
				data: data_1.reverse(),
				type: 'line',
				lineStyle: {
					color: '#09BB07',
					width: 2
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(1, 132, 213, 0.4)'
					}, {
						offset: 0.8,
						color: 'rgba(1, 132, 213, 0.1)'
					}], false),
					shadowColor: 'rgba(0, 0, 0, 0.1)'
				}
			}]
		};
		var myChart = echarts.init(document.getElementById("echart1"))
		myChart.setOption(option)

	}
	echart_1()

	function echart_2() {
		let data_1=[]
		let data_2=[]
		$.ajax({
			url: analyzeUrl.getLocationRankData,
			dataType:"json",
			async:false,
			beforeSend: function (request) {
				request.setRequestHeader("token", localStorage.getItem("token"));
				request.setRequestHeader("ip", sessionStorage.getItem("ip"));
			},
			success: function(resp) {
				let list=resp.data
				for(let one of list){
					data_1.push(one.location)
					data_2.push({name:one.location,value:one.ct})
				}
				console.log(resp)
			}
		})
		option = {
			xAxis: {
				type: 'category',
				data: data_1,
				axisLabel: {
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: 12
					}
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)'
					}
				},
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					textStyle: {
						color: "rgba(255,255,255,.6)",
						fontSize: 12
					}
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.2)'
					}
				},
				splitLine: {
					lineStyle: {
						color: 'rgba(255,255,255,.1)'
					},
				}
			},
			grid: {
				left: '0%',
				right: '0%',
				top: '10px',
				bottom: '2%',
				containLabel: true
			},
			series: [{
				data: data_2,
				type: 'bar',
				showBackground: true,
				barWidth: '35%',
				itemStyle: {
					color: '#E65561',
					opacity: 1,
					barBorderRadius: 5
				}
			}]
		};
		var myChart = echarts.init(document.getElementById("echart2"))
		myChart.setOption(option)
	}
	echart_2();

	function echart_3() {
		let data=[]
		$.ajax({
			url: analyzeUrl.getPaymentData,
			dataType:"json",
			async:false,
			beforeSend: function (request) {
				request.setRequestHeader("token", localStorage.getItem("token"));
				request.setRequestHeader("ip", sessionStorage.getItem("ip"));
			},
			success: function(resp) {
				console.log(resp)
				let list=resp.data

				for(let one of list){
					if(one.payment_type==1){
						data.push({value:one.ct,name:"微信"})
					}
					if(one.payment_type==2){
						data.push({value:one.ct,name:"支付宝"})
					}
					if(one.payment_type==3){
						data.push({value:one.ct,name:"银联"})
					}
				}
			}
		})
		option = {
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				data: ['微信', '支付宝', '银联'],
				textStyle: {
					color: 'rgba(255,255,255,0.5)',
					fontSize: 12
				}
			},
			color: ['#09BB07', '#1576FE', '#F7261F'],
			series: [{
				name: '访问来源',
				type: 'pie',
				radius: '55%',
				center: ['50%', '60%'],
				data: data,
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};
		var myChart = echarts.init(document.getElementById("echart3"))
		myChart.setOption(option)

	}
	echart_3()

});
